<template>
  <div id="app_old">
   
    <div class="header">
        <!-- 图标logo -->
        <div class="logo" @click="goto_login">
          <img src="../assets/picture/logo.png" >
          <span>xFlow</span>
        </div>

        <!-- 导航栏 -->
        <div class="head_menu">
           <el-menu default-active="/xflow/X_PageShow"  :router="true" mode="horizontal">
             <el-menu-item index="/xflow/X_PageShow" >
               <i class="el-icon-s-promotion"></i>
               <span slot="title">首页</span>
             </el-menu-item>
             <el-menu-item index="/xflow/X_Note">
               <i class="el-icon-collection"></i>
               <span slot="title">笔记</span>
             </el-menu-item>
             <el-menu-item index="/xflow/X_Video">
               <i class="el-icon-video-camera-solid"></i>
               <span slot="title">视频</span>
             </el-menu-item>
             <el-menu-item index="/xflow/X_AboutMe">
               <i class="el-icon-user-solid"></i>
               <span slot="title">我的</span>
             </el-menu-item>
           </el-menu>
        </div>

        <!-- 搜索框 -->
        <div class="header_search">
          <el-input placeholder="探索心流" v-model="search_text">
              <el-button slot="append" icon="el-icon-search" ></el-button>
          </el-input>
        </div>

        <div class="user_imfo">

           <!-- 用户头像 -->
           <img :src="user_imfo.circleUrl">

           <!-- 站内消息-下拉菜单 -->
           <el-dropdown class="my_dropdown">
            <div class="my_ico_font">
              <div>
                <i class="el-icon-message my_ico_style"></i>
              </div>
              <div>
                <span class="el-dropdown-link">
                 消息<i class="el-icon-arrow-down el-icon--right"></i>
               </span>
              </div>
            </div>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item>回复我的</el-dropdown-item>
               <el-dropdown-item>收到的赞</el-dropdown-item>
               <el-dropdown-item>螺蛳粉</el-dropdown-item>
               <el-dropdown-item disabled>双皮奶</el-dropdown-item>
               <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>

           <!-- 证书 -->
           <div class="certificate">
              <div class="my_ico_font">
                <div>
                  <i class="el-icon-medal-1 my_ico_style"></i>
                </div>
                <div>
                  <span class="el-dropdown-link">
                   证书
                 </span>
                </div>
              </div>
           </div>

           <!-- 历史 -->
           <div class="history">
              <div class="my_ico_font">
                <div>
                  <i class="el-icon-time my_ico_style"></i>
                </div>
                <div>
                  <span class="el-dropdown-link">
                   历史
                 </span>
                </div>
              </div>
           </div>

           <!-- 投稿 -->
           <div class="contribute">
            <el-button type="primary" icon="el-icon-set-up" plain @click="goto_admin">管理</el-button>
           </div>
        </div>
    </div>

    <!-- 主体内容 -->
    <div class="container">
    
      <!-- 过渡效果 -->
      <transition :name="animate">
        <router-view ref="child"></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
    name: 'App_old',
    data() { 
      return {
        animate: '',
        search_text: "",
        user_imfo: {
          size: "large",
          circleUrl: window.sessionStorage.getItem("user_avatar")
        }
      }
    },
    watch: {
      $route(to, from) {
        if (to.meta.index > from.meta.index) {
          this.animate = "slide-left";
        } else {
          this.animate = "slide-right";
        }
      }
    },
    methods: {
      search () {},
      goto_admin () {
        this.$router.push("/admin")
      },
      goto_login () {
        // 清除sessionStorage存储的信息
        window.sessionStorage.clear()
        this.$router.push("/login")
      }
    }
  }
</script>

<style lang="less" >
#app_old {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: 1000px;
  min-height: 900px;
  // overflow: scroll;
  overflow: hidden;
}
/* 去除滚动栏，保留滚动效果*/
// #app::-webkit-scrollbar {
//   width: 0;
//   height: 0;
//   background-color: transparent;
// } 


.header {
  display: flex;
  width: 100%;
  height: 60px;

  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;

  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(50px);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px 2px;
  transition: all 0.3s ease 0s;
  
  // border: 1px solid black;

  position: fixed;
  top: 0;

  .logo {
    height: 100%;
    width: auto;
    img {
      height: 40px;
      width: auto;
      position: absolute;
      top: 50%;
      left: 20px;
      transform: translateY(-50%);
    }
    span {
      padding-left: 40px;
      font-size:26px;
      font-weight: 600px;
      line-height: 60px;
      color: #5A54F9;;
      text-shadow: 0px 0px 6px rgba(179, 177, 248, 0.565);
    }
  }
  .logo:hover {
    cursor: pointer;
  }

  // 导航栏
  .head_menu {
    width: auto;
    height: 100%;
    margin-left: 5px;
    margin-right: 5px;
    box-sizing: border-box;
    // border: 1px solid black;
    color: #303133;
    // 侧边栏字体
    // 侧边栏字体
    font-size: 18px;
    font-weight: 600;
    // icon字体图标的颜色
    z-index: 2;
    i {
      color: #303133;
    }

    // 导航栏 激活与否样式
    .el-menu {
      background-color: rgba(0, 0, 0, 0);
      height: 60px;
      border-right: none;
      border-bottom: none;
    }
    .el-menu-item {
      // 侧边栏字体
      font-size: 18px;
      font-weight: 400;
      background-color: rgba(0, 0, 0, 0);
      border-radius: 2px;
      text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.565);
      color: #303133;
    }
    .el-menu-item.is-active {
      color: #5a54f9;
      font-weight: 500;
      background-color: rgba(210, 188, 253, 0.3);
      text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.565);
      border-radius: 2px;
    }
  }

  // 搜索框
  .header_search {

      width: 30%;
      height: 45px;

      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      border-radius: 20px;
      .el-input.el-input-group.el-input-group--append {
        height: 100%;
      }
      .el-input__inner {
        height: 100%;
      }
      .el-input__inner {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        // background: #efeefe;
        border-color: #bdbbfd;
      }
      .el-input-group__append {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        color: #5A54F9;
        background: #efeefe;
        border-color: #bdbbfd;
      }
    }

    // 用户信息
    .user_imfo {
      height: 100%;
      width: 390px;
      // background-color: #bdbbfd;
      // border: 1px solid black;
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      // 头像
      img {
        height: 50px;
        width: 50px;
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        border: 1px solid #fff;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px 2px; 
      }
      // 消息
      .my_dropdown {
        // border: 1px solid black;
        height: 100%;
        width: 80px;
        
        position: absolute;
        top: 50%;
        left: 60px;
        transform: translateY(-50%);

        .my_ico_font {
          height: 100%;
          div {
            height: 50%;
            text-align: center;
            .my_ico_style {
              color: #303133;
              font-size: 20px;
              font-weight: 600;
              text-shadow: 0px 0px 1px rgba(4, 4, 4, 0.1);
              height: 100%;
              line-height: 34px;
            }
            span {
              color: #303133;
              font-size: 16px;
              font-weight: 500;
              text-shadow: 0px 0px 1px rgba(7, 7, 7, 0.1);
              height: 100%;
              line-height: 30px;
            }
          }
        }
      }
      // 证书
      .certificate {
        // border: 1px solid black;
        height: 100%;
        width: 80px;

        text-align: center;

        position: absolute;
        left: 140px;
        .my_ico_font {
          height: 100%;
          div {
            height: 50%;
            text-align: center;
            .my_ico_style {
              color: #303133;
              font-size: 20px;
              font-weight: 600;
              text-shadow: 0px 0px 1px rgba(4, 4, 4, 0.1);
              height: 100%;
              line-height: 34px;
            }
            span {
              color: #303133;
              font-size: 16px;
              font-weight: 500;
              text-shadow: 0px 0px 1px rgba(7, 7, 7, 0.1);
              height: 100%;
              line-height: 30px;
            }
          }
        }
      }
      // 历史
      .history {
        // border: 1px solid black;
        height: 100%;
        width: 80px;

        text-align: center;

        position: absolute;
        left: 210px;
        .my_ico_font {
          height: 100%;
          div {
            height: 50%;
            text-align: center;
            .my_ico_style {
              color: #303133;
              font-size: 20px;
              font-weight: 600;
              text-shadow: 0px 0px 1px rgba(4, 4, 4, 0.1);
              height: 100%;
              line-height: 34px;
            }
            span {
              color: #303133;
              font-size: 16px;
              font-weight: 500;
              text-shadow: 0px 0px 1px rgba(7, 7, 7, 0.1);
              height: 100%;
              line-height: 30px;
            }
          }
        }
      }

      // 投稿
      .contribute {
        // border: 1px solid black;
        height: 100%;
        width: 90px;

        text-align: center;

        position: absolute;
        left: 290px;
        .el-button {
          width: 100%;

          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);

          border-radius: 5px;
          i {
              font-size: 16px;
              font-weight: 500;
              text-shadow: 0px 0px 1px rgba(7, 7, 7, 0.1);
          }
          span {
              font-size: 16px;
              font-weight: 500;
              text-shadow: 0px 0px 1px rgba(7, 7, 7, 0.1);
          }
        }
      }
    }
}

.container {
  width: 100%;
  height: auto;
  min-height: 900px;

  margin-top: 65px;
  // position: absolute;
  // top: 65px;
  // transform: translateY(65px);
  padding-bottom: 50px;

  // background-color: #bdbbfd;
  // border: 1px solid black;
  // border-radius: 10px;
}


/* 动画过渡 */
.Router {
  position: absolute;
  left: 0;
  right: 0;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 300ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

</style>
